/**
  * @description: 店铺中的商品模块
  * @author: yingying.fan
  * @date: 2019/2/25 17:56
  */
import React, { Component } from 'react'
import { StyleSheet, View, Image, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import PropTypes from 'prop-types'
import { appSubThemeColor } from '../../configs/appconfig'
import OrderOpBtnList from './OrderBtnList'

export default class OrderListPage extends Component {

  static propTypes = {
    skuInfo: PropTypes.object.isRequired, // 店铺数据
    isFirst: PropTypes.bool // 是否是第一个数据
  }
  static defaultProps = {
    skuInfo: {},
    isFirst: false
  }

  constructor (props) {
    super(props)
    this.state = {}
  }

  _getSkuOpBtns = () => {
    let opBtnListView
    if (this.props.orderInfo.OP && this.props.orderInfo.OP.length > 0) {
      opBtnListView = (<OrderOpBtnList
        orderIndex={this.props.orderIndex}
        orderInfo={this.props.orderInfo}
      />)
    }
    return (
      <View style={styles.btnContainer}>
        {opBtnListView}
      </View>
    )
  }

  render () {
    let skuInfo = this.props.skuInfo
    let skuContainer = styles.skuContainer
    if (this.props.isFirst) {
      skuContainer = { ...skuContainer, ...styles.skuBorderTop }
    }
    return (
      <View style={skuContainer}>
        <Image
          source={{ uri: skuInfo.SKU_PIC }}
          style={styles.skuIcon}/>
        <View style={styles.skuCenterView}>
          <Text style={styles.skuName} numberOfLines={1}>{skuInfo.SKU_NAME}</Text>
          <Text style={styles.skuDesc} numberOfLines={1}>{skuInfo.SKU_PROPS_NAME}</Text>
          <Text style={styles.skuBuyPrice}>
            ¥{skuInfo.SKU_BUY_PRICE}&nbsp;
            <Text style={styles.skuListPrice}>¥{skuInfo.LIST_PRICE}</Text>
          </Text>
        </View>
        <Text style={styles.skuName}>x{skuInfo.SKU_NUM}</Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  skuContainer: {
    flexDirection: 'row',
    height: px2dp(180),
    paddingVertical: px2dp(20),
    marginHorizontal: px2dp(30)
  },
  skuBorderTop: {
    borderStyle: 'solid',
    borderTopColor: '#dddddd',
    borderTopWidth: px2dp(1)
  },
  skuIcon: {
    width: px2dp(140),
    height: px2dp(140)
  },
  skuCenterView: {
    flex: 1,
    justifyContent: 'space-between',
    paddingHorizontal: px2dp(30)
  },
  skuName: {
    fontSize: px2dp(28),
    color: '#333333'
  },
  skuDesc: {
    fontSize: px2dp(24),
    color: '#999999'
  },
  skuBuyPrice: {
    fontSize: px2dp(28),
    color: appSubThemeColor,
    paddingTop: px2dp(6)
  },
  skuListPrice: {
    fontSize: px2dp(18),
    color: '#999999',
    textDecorationLine: 'line-through',
    paddingBottom: px2dp(2)
  },
  btnContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingTop: px2dp(20),
    borderStyle: 'solid',
    borderTopColor: '#dddddd',
    borderTopWidth: px2dp(1)
  }
})